<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大宋百商图 - 在线游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: #f0e6d2 url('https://www.transparenttextures.com/patterns/paper.png');
            color: #5d4037;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 3px solid #8d6e63;
            margin-bottom: 30px;
        }
        
        h1 {
            font-size: 3rem;
            color: #5d4037;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
            font-weight: bold;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #795548;
            font-style: italic;
        }
        
        .game-panels {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .panel {
            background: rgba(237, 231, 221, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            flex: 1;
        }
        
        .panel h2 {
            color: #5d4037;
            border-bottom: 2px solid #8d6e63;
            padding-bottom: 10px;
            margin-bottom: 15px;
            font-size: 1.8rem;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #5d4037;
        }
        
        input, select, button {
            width: 100%;
            padding: 10px;
            border: 2px solid #8d6e63;
            border-radius: 5px;
            background: #fff;
            font-size: 1rem;
        }
        
        button {
            background: #8d6e63;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            margin-top: 10px;
        }
        
        button:hover {
            background: #6d4c41;
            transform: translateY(-2px);
        }
        
        #lobby {
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        #player-list {
            list-style: none;
            margin: 15px 0;
        }
        
        #player-list li {
            padding: 10px;
            background: #f5f5f5;
            margin-bottom: 5px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }
        
        #player-list li.ready {
            background: #e8f5e9;
        }
        
        #game-info {
            text-align: center;
            padding: 20px;
            background: rgba(237, 231, 221, 0.9);
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .game-rules {
            margin-top: 30px;
            padding: 20px;
            background: rgba(237, 231, 221, 0.9);
            border-radius: 10px;
        }
        
        .game-rules h2 {
            color: #5d4037;
            border-bottom: 2px solid #8d6e63;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .rules-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 15px;
        }
        
        .rule-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .rule-card h3 {
            color: #8d6e63;
            margin-bottom: 10px;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #795548;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .game-panels {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>大宋百商图</h1>
            <div class="subtitle">重现北宋汴京商业盛景 · 在线多人经营游戏</div>
        </header>
        
        <div class="game-panels">
            <div class="panel">
                <h2>创建新游戏</h2>
                <div class="form-group">
                    <label for="host-name">你的名字</label>
                    <input type="text" id="host-name" placeholder="输入你的名字">
                </div>
                <button id="create-game">创建游戏房间</button>
            </div>
            
            <div class="panel">
                <h2>加入游戏</h2>
                <div class="form-group">
                    <label for="player-name">你的名字</label>
                    <input type="text" id="player-name" placeholder="输入你的名字">
                </div>
                <div class="form-group">
                    <label for="game-id">游戏房间ID</label>
                    <input type="text" id="game-id" placeholder="输入房间ID">
                </div>
                <button id="join-game">加入游戏</button>
            </div>
        </div>
        
        <div id="lobby" style="display:none;">
            <h2>游戏大厅 <span id="game-id-display"></span></h2>
            <div>等待玩家加入...</div>
            <ul id="player-list"></ul>
            <button id="start-game" style="display:none;">开始游戏</button>
        </div>
        
        <div id="game-info">
            <p>游戏ID: <span id="current-game-id"></span></p>
            <p>玩家ID: <span id="current-player-id"></span></p>
        </div>
        
        <div class="game-rules">
            <h2>游戏规则</h2>
            <div class="rules-list">
                <div class="rule-card">
                    <h3>游戏目标</h3>
                    <p>建造8间店铺并积累50两白银成为汴京首富！</p>
                </div>
                <div class="rule-card">
                    <h3>回合流程</h3>
                    <p>1. 优化菜单 - 升级菜品增加收入</p>
                    <p>2. 招待客人 - 服务客人获取收入</p>
                    <p>3. 建造店铺 - 扩大商业版图</p>
                </div>
                <div class="rule-card">
                    <h3>店铺联动</h3>
                    <p>相邻店铺可产生额外收益，如茶肆和说书场可互相促进</p>
                </div>
                <div class="rule-card">
                    <h3>历史背景</h3>
                    <p>游戏基于北宋汴京商业文化，还原《清明上河图》中的繁华景象</p>
                </div>
            </div>
        </div>
        
        <footer>
            <p>大宋百商图在线游戏 · 基于Python Flask和JavaScript开发</p>
            <p>重现北宋商业盛景，体验汴京市井生活</p>
        </footer>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        const socket = io();
        let gameId = '';
        let playerId = '';
        
        // 创建游戏
        document.getElementById('create-game').addEventListener('click', () => {
            const playerName = document.getElementById('host-name').value;
            if (!playerName) {
                alert('请输入你的名字');
                return;
            }
            
            fetch('/create_game', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    player_name: playerName
                })
            })
            .then(response => response.json())
            .then(data => {

                if (data.error) {
                    alert(data.error);
                    return;
                }
                gameId = data.game_id;
                playerId = data.player_id;
                
                // 加入游戏
                joinGame(playerName);
            });
        });
        
        // 加入游戏
        document.getElementById('join-game').addEventListener('click', () => {
            const playerName = document.getElementById('player-name').value;
            const inputGameId = document.getElementById('game-id').value;
            
            if (!playerName || !inputGameId) {
                alert('请输入你的名字和游戏ID');
                return;
            }
            
            fetch('/join_game', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    game_id: inputGameId,
                    player_name: playerName
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }
                
                gameId = data.game_id;
                playerId = data.player_id;
                joinGame(playerName);
            });
        });
        
        // 开始游戏
        document.getElementById('start-game').addEventListener('click', () => {
            socket.emit('start_game', { game_id: gameId });
        });
        
        // 加入游戏逻辑
        function joinGame(playerName) {
            // 保存玩家ID
            localStorage.setItem('player_id', playerId);
            
            document.getElementById('current-game-id').textContent = gameId;
            document.getElementById('current-player-id').textContent = playerId;
            
            // 显示大厅
            document.getElementById('lobby').style.display = 'block';
            document.getElementById('game-id-display').textContent = gameId;
            
            // 连接到SocketIO
            socket.emit('join', {
                game_id: gameId,
                player_id: playerId
            });
            
            // 如果是房主，显示开始按钮
            if (playerId.startsWith('host_')) {
                document.getElementById('start-game').style.display = 'block';
            }
        }
        
        // 监听游戏更新
        socket.on('update_game', (gameState) => {
            console.log('Game updated:', gameState);
            updateLobby(gameState);
            
            // 如果游戏已经开始，跳转到游戏页面
            if (gameState.phase !== 'lobby') {
                window.location.href = `/game/${gameId}/player/${playerId}`;
            }
        });
        
        // 更新大厅信息
        function updateLobby(gameState) {
            const playerList = document.getElementById('player-list');
            playerList.innerHTML = '';
            
            for (const [id, player] of Object.entries(gameState.players)) {
                const li = document.createElement('li');
                
                // 处理不同的玩家数据格式
                let playerName = '';
                if (typeof player === 'string') {
                    playerName = player;
                } else if (player && player.name) {
                    playerName = player.name;
                } else {
                    playerName = id;
                }
                
                li.textContent = playerName;
                
                // 标记当前玩家
                if (id === playerId) {
                    li.style.fontWeight = 'bold';
                    li.style.backgroundColor = '#e8f5e9';
                    li.innerHTML += ' (我)';
                }
                
                playerList.appendChild(li);
            }
        }
    </script>
</body>
</html>